<script setup>
import {ref,watch,onMounted} from 'vue'
import{queryPageApi,addApi,queryInfoApi,updateApi,deleteApi} from '@/api/emp' 
import { ElMessage,ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {queryAllApi as queryAllDeptApi} from '@/api/dept'

// token
const token = ref('')

// 元数据
// 职位列表数据
const jobs = ref([{name:'班主任',value: 1},{name:'讲师',value: 2},{name:'学工主管',value: 3},{name:'教研主管',value: 4},{name:'咨询师',value: 5}])
// 性别列表数据
const genders = ref([{name:'男',value: 1},{name:'女',value: 2}])
// 部门列表数据
const depts = ref([])


// 搜索表单对象
const searchEmp = ref( {name: '',gender: '',date: [],begin:'',end:''})

// 侦听searchEmp对象的date属性
watch(() => searchEmp.value.date,(newVal,oldVal) => {
  if(newVal.length ==2) {
    searchEmp.value.begin = newVal[0]
    searchEmp.value.end = newVal[1]
  }else {
    searchEmp.value.begin = ''
    searchEmp.value.end = ''
  }
})

// 查询员工列表
const search = async () => {
  const result = await queryPageApi(searchEmp.value.name,searchEmp.value.gender,
  searchEmp.value.begin,searchEmp.value.end,currentPage.value,pageSize.value)
  if(result.code){
    empList.value = result.data.rows
    total.value = result.data.total
  }
}

// 钩子函数
onMounted (() => {
  search()  //查询员工列表数据
  queryAllDepts() //查询所有部门列表
  getToken()//获取token
})

//获取token
const getToken = () => {
  const loginUser = JSON.parse(localStorage.getItem('loginUser'))
  if(loginUser&&loginUser.token){ 
    token.value = loginUser.token
  }
}
// 查询所有部门数据
const queryAllDepts = async () => {
  const result = await queryAllDeptApi()
  if(result.code){
    depts.value = result.data
  }
}

// 清空
const clear = () => {
  searchEmp.value = {name: '',gender: '',date: [],begin:'',end:''}
  currentPage.value = 1
  pageSize.value = 10
  search()
}

// watch侦听------------演示-----------------------
// 1.侦听一个响应式数据
// const a = ref('')
// watch(a,(newvalue,oldvalue) => {
//   console.log(`变化后的值:${newvalue},变化前的值:${oldvalue}`)
// })

// 2.侦听一个响应式对象（侦听对象的全部属性）
// const user = ref({name:'',age:18})
// watch(user,(newvalue,oldvalue) => {
//   console.log(newvalue)
// },{deep:true})//深度侦听

// 3.侦听对象中的某一个属性
// const user = ref({name:'',age:18})
// watch(() => user.value.age,(newvalue,oldvalue) => {
//   console.log(`变化后的值:${newvalue},变化前的值:${oldvalue}`)
// })


// 员工列表数据

const empList = ref([])

// 分页
const currentPage = ref(1)//页码
const pageSize = ref(10)//每页展示记录数
const background = ref(true)//背景颜色
const total = ref(0)//总记录数

// 每页展示记录数变化
const handleSizeChange = (val) => {
  search()
}
// 页码变化时触发
const handleCurrentChange = (val) => {
  search()
}

// Dialog对话框
const dialogVisible = ref(false)
const dialogTitle = ref('新增员工')

// 新增/修改表单
const employee = ref({
  username: '',
  name: '',
  gender: '',
  phone: '',
  job: '',
  salary: '',
  deptId: '',
  entryDate: '',
  image: '',
  exprList: []
})

// 添加员工按钮
const addEmp = () => {
  dialogVisible.value = true
  dialogTitle.value = '新增员工'
  employee.value = {
    username: '',
    name: '',
    gender: '',
    phone: '',
    job: '',
    salary: '',
    deptId: '',
    entryDate: '',
    image: '',
    exprList: []
  }
   // 重置表单的校验规则-提示信息
  if(empFormRef.value){
    empFormRef.value.resetFields()
  }
}


// 文件上传

// 用户头像上传
const imageUrl = ref('')

// 文件上传成功后触发
const handleAvatarSuccess = (response) => {
  employee.value.image = response.data
}
// 文件上传之前触发
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg'&& rawFile.type !== 'image/png') {
    ElMessage.error('只支持上传图片')
    return false
  } else if (rawFile.size / 1024 / 1024 > 10) {
    ElMessage.error('只能上传10M以内图片')
    return false
  }
  return true
}

// 添加工作经历
// const addExprItem = () => {
//   employee.value.exprList.push({company: '',job: '',begin: '',end: '',exprDate: []})
// }
// 删除工作经历
const delExprItem = (index) => {
  employee.value.exprList.splice(index,1)
}
// 侦听 方式一
// 侦听employee员工对象中工作经历的exprDate属性
// watch(() => employee.value.exprList,(newVal,oldVal) => {
//   if(employee.value.exprList&&employee.value.exprList.length >0 ) {
//     employee.value.exprList.forEach((expr) => {
//       expr.begin = expr.exprDate[0]
//       expr.end = expr.exprDate[1]
//     })
//   }else {
//     employee.value.exprList.forEach((expr) => {
//       expr.begin = ''
//       expr.end = ''
//     })
//   }
// }, {deep: true})

// 侦听 方式二
// 侦听exprDate属性-在日期选择器 change 事件中赋值​
// 如果使用的是 Element UI 的日期范围选择器，可以直接在 @change 事件中更新
// const handleDateChange = (expr) => {
//   if(expr.exprDate&&expr.exprDate.length === 2){
//     expr.begin = expr.exprDate[0]
//     expr.end = expr.exprDate[1]
//   }
// }
// 侦听 方式三 推荐！！！ 使用 getter 动态计算 begin 和 end，无需手动监听。当 exprDate 变化时，begin 和 end 会自动更新。
// 添加工作经历
const addExprItem = () => {
  employee.value.exprList.push({
    company: '',
    job: '',
    get begin() {
      return this.exprDate?.[0] || ''; // 动态计算 begin
    },
    get end() {
      return this.exprDate?.[1] || ''; // 动态计算 end
    },
    exprDate: []
  })
}

// 新增员工
const save = async () => {
  if(!empFormRef.value){
    return
  }
  empFormRef.value.validate(async (valid) => {
    if(valid){//通过 校验通过
      let result
      if(employee.value.id){//修改
        result = await updateApi(employee.value)
      }else{//新增
        result = await addApi(employee.value)
      }

      if(result.code){ //成功
        //1. 提示消息
        ElMessage.success('保存成功')
        //2. 关闭对话框
        dialogVisible.value = false
        //3. 查询
        search()
      }
      else{//失败
        ElMessage.error(result.msg)
      }
    }else{//不通过
      ElMessage.error('表单校验不通过')
    }
  })
}
const empFormRef = ref();
// 表单校验
const rules = ref({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 2, max: 20, message: '用户名长度为2到20位', trigger: 'blur' },
    { pattern: /^[a-zA-Z]+$/, message: '用户名仅允许输入字母' }
  ],
  name: [
    { required: true, message: '请输入员工姓名', trigger: 'blur' },
    { min: 2, max: 10, message: '员工姓名长度为2到10位', trigger: 'blur' },
    { pattern: /^[\u4e00-\u9fa5]+$/, message: '员工姓名仅允许输入汉字' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入手机号', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号' }
  ]
})

//修改员工-查询回显
const edit = async (id) => {
  const result = await queryInfoApi(id)
  if(result.code){
    dialogVisible.value = true
    dialogTitle.value = '修改员工'
    employee.value = result.data

    // 对工作经历进行处理（将begin和end赋值给exprDate）
    let exprList = employee.value.exprList
    if(exprList&&exprList.length>0){
      exprList.forEach(expr=>{
        expr.exprDate=[expr.begin,expr.end]
      })
    }
  }
}

// 根据ID删除单个员工
const deleteById = async (id) => { 
  ElMessageBox.confirm('您确定要删除该员工吗 ?','提示',
  {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
  ).then( async () => {//确认
    try {
    const result = await deleteApi(id)
    if(result.code){
      ElMessage.success('删除成功')
      search()
    }
    else{
      ElMessage.error(result.msg)
    }
    }catch (error) {
      ElMessage.error('删除失败')
    }
  }).catch(() => {//取消
    ElMessage.info('您已取消删除')
  })
}

// 记录勾选的员工ID
const selectedIds = ref([])
// 复选框勾选发生变化时触发 - selection:当前选中的记录组成的数组
const handleSelectionChange = (selection) => {
  selectedIds.value = selection.map(item => {
    return item.id
  })
}
// 批量删除员工
const deleteByIds = async () => {
  ElMessageBox.confirm('您确定要删除该员工吗 ?','提示',
  {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}
  ).then( async () => {//确认
    if(selectedIds && selectedIds.value.length > 0 ){
      try {
        const result = await deleteApi(selectedIds.value)
        if(result.code){
          ElMessage.success('删除成功')
          search()
        }
        else{
          ElMessage.error(result.msg)
        }
        }catch (error) {
          ElMessage.error('删除失败')
        }
    }else{
      ElMessage.warning('请选择要删除的员工')
    }
   
  }).catch(() => {//取消
    ElMessage.info('您已取消删除')
  })
}
</script>

<template>
  <h1>员工管理</h1>
  <!-- 搜索栏 -->
   <div class="container">
    <el-form :inline="true" :model="searchEmp" class="demo-form-inline">
    <el-form-item label="姓名">
      <el-input v-model="searchEmp.name" placeholder="请输入员工姓名" clearable />
    </el-form-item>
    <el-form-item label="性别">
      <el-select v-model="searchEmp.gender" placeholder="请选择" clearable>
        <el-option label="男" value="1" />
        <el-option label="女" value="2" />
      </el-select>
    </el-form-item>
    <el-form-item label="入职时间">
      <el-date-picker
        v-model="searchEmp.date"
        type="daterange"
        range-separator="到"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
      <el-button type="info" @click="clear">清空</el-button>
    </el-form-item>
  </el-form>
   </div>


   <!-- 功能按钮 -->
  <div class="container">
    <el-form-item>
      <el-button type="primary" @click="addEmp"> + 新增员工</el-button>
      <el-button type="danger" @click="deleteByIds"> - 批量删除</el-button>
    </el-form-item>
  </div>

  <!-- 员工列表 -->
  <div class="container">
    <el-table :data="empList" border style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="50" align="center" />
    <el-table-column prop="name" label="姓名" width="120" align = "center" />
    <el-table-column prop="gender" label="性别" width="120" align = "center" >
      <template #default="scope">
        {{ scope.row.gender == 1 ? '男' : '女' }}
      </template>
    </el-table-column>
    <el-table-column prop="image" label="头像" width="120" align = "center" >
      <template #default="scope">
        <img :src="scope.row.image" height="40px"/>
      </template>
    </el-table-column>
    <el-table-column prop="deptName" label="所属部门" width="130" align = "center" />
    <el-table-column prop="job" label="职位" width="130" align = "center" >
      <template #default="scope">
        <span v-if="scope.row.job === 1">班主任</span>
        <span v-else-if="scope.row.job === 2">讲师</span>
        <span v-else-if="scope.row.job === 3">学工主管</span>
        <span v-else-if="scope.row.job === 4">教研主管</span>
        <span v-else-if="scope.row.job === 5">咨询师</span>
        <span v-else>其他</span>
      </template>
    </el-table-column>
    <el-table-column prop="entryDate" label="入职日期" width="180" align = "center" />
    <el-table-column prop="updateTime" label="最后操作时间" width="200" align = "center" />
    <el-table-column prop="address" label="操作" align = "center" >
      <template #default="scope">
        <el-button size="small" type="primary" @click="edit(scope.row.id)"><el-icon><Edit /></el-icon>编辑</el-button>
        <el-button size="small" type="danger" @click="deleteById(scope.row.id)"><el-icon><Delete /></el-icon>删除</el-button>
      </template>
    </el-table-column>
    </el-table>
  </div>

<!-- 分页条 -->
  <div class="container">
    <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5,10, 20, 30, 40, 50,75,100]"
    :background="background"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  </div>

<!-- 新增员工/修改员工Dialog对话框 -->
<el-dialog v-model="dialogVisible" :title="dialogTitle" >
    <el-form :model="employee" label-width="80px" :rules="rules" ref="empFormRef">
      <!-- 第一行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="employee.username"  placeholder="请输入员工用户名，2-20个字"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="employee.name" placeholder="请输入员工姓名，2-10个字" />
          </el-form-item>
        </el-col>
      </el-row>

    <!-- 第二行 -->
     <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-select v-model="employee.gender" style="width: 100%;" placeholder="请选择">
              <el-option v-for="gender in genders" :key="gender.value" :label="gender.name" :value="gender.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="employee.phone" placeholder="请输入员工手机号" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第三行 -->
        <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="职位" >
            <el-select v-model="employee.job" style="width: 100%;" placeholder="请选择" clearable>
              <el-option v-for="job in jobs" :key="job.value" :label="job.name" :value="job.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="薪资">
            <el-input v-model="employee.salary" placeholder="请输入员工薪资" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第四行 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="所属部门" >
            <el-select v-model="employee.deptId" style="width: 100%;" placeholder="请选择" clearable>
              <el-option v-for="dept in depts" :key="dept.id" :label="dept.name" :value="dept.id" />

            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="入职日期">
            <el-date-picker v-model="employee.entryDate" type="date" style="width: 100%;" placeholder="请选择入职日期" 
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第五行 -->
       <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="头像" >
            <el-upload
            class="avatar-uploader"
            action="/api/upload"
            :headers="{'token':token}"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="employee.image" :src="employee.image" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
          </el-form-item>
        </el-col>
       </el-row>

       <!-- 第六行 -->
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="工作经历" >
            <el-button type="success" size="small" @click="addExprItem">+ 添加工作经历</el-button>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 第七行 -->
       <el-row :gutter="3" v-for="(expr,index) in employee.exprList" :key="index">
        <el-col :span="10">
          <el-form-item size="small" label="时间" label-width="80px" >
            <el-date-picker  type="daterange" @change="handleDateChange(expr)" v-model="expr.exprDate" range-separator="到" start-placeholder="开始日期" end-placeholder="结束日期"
            format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item size="small" label="公司" label-width="60px" >
            <el-input v-model="expr.company" placeholder="请输入公司的名字" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item size="small" label="职位" label-width="60px" >
            <el-input v-model="expr.job" placeholder="请输入职位" />
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-form-item size="small" label-width="0px" >
            <el-button type="danger" size="small" @click="delExprItem(index)">- 删除</el-button>
          </el-form-item>
          
        </el-col>
      </el-row>
    </el-form>
    <!-- 底部按钮 -->
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button type="info" @click="dialogVisible = false">取消</el-button>
      </div>
    </template>
</el-dialog>
</template>

<style scoped>
.container {
  margin: 10px 0px;
}
.avatar {
  height: 40px;
}
.avatar-uploader .avatar {
  width: 78px;
  height: 78px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 78px;
  height: 78px;
  text-align: center;
  border-radius: 10px;
  /* 添加灰色的虚线边框 */
  border: 1px dashed var(--el-border-color);
}

</style>